<!-- 角色编辑弹窗 -->
<template>
  <div>
    <el-drawer :visible="drawerEditBoolen"
               size="50%"
               :before-close="handleClose"
               ref="drawer">
      <template v-slot:title>
        <span class="hLabel">{{ isUpdate ? '消费详情' : '添加分类' }}</span>
      </template>
      <div class="ele-body">

        <div class="flex-column-between "
             v-if="consumptionDetails.operate_type==8||consumptionDetails.operate_type==9||consumptionDetails.operate_type==18||consumptionDetails.operate_type==19">
          <el-card class="box-card"
                   shadow="never">
            <div slot="header"
                 class="clearfix">
              <span>订单信息</span>
            </div>
            <div class="padding30">
              <div class="m-bottom15">订单编号: {{ consumptionDetails.goods_order.sn_order }}</div>

              <div class="m-bottom15">下单时间
                {{ consumptionDetails.goods_order.create_time}} </div>

              <div class="m-bottom15">支付状态: {{ informationType(consumptionDetails.goods_order?.status)?.text }}</div>

              <div class="m-bottom15">支付方式: {{serviceStatusType(consumptionDetails.goods_order.pay_way)?.text  }}</div>
              <div class="m-bottom15">价格: ￥{{consumptionDetails.goods_order.total_price  }}</div>
              <div class="m-bottom15">会员折扣: {{Number(consumptionDetails.goods_order.discount_ratio)/10 }}折</div>
              <div class="m-bottom15">优惠: ￥{{Number(consumptionDetails.goods_order.discount_amount)}}</div>
              <div class="m-bottom15">折扣价格:￥{{Number(consumptionDetails.goods_order.coupon_deduction_amount)}}</div>
              <div class="m-bottom15"
                   v-if="consumptionDetails.goods_order.discount_intensity">优惠券:-￥{{Number(consumptionDetails.goods_order.discount_intensity)}}</div>
              <div class="m-bottom15">积分折扣:￥{{Number((consumptionDetails.goods_order.point_deduction_amount)/10)}}</div>
              <div class="m-bottom15">实付款:￥{{Number(consumptionDetails.goods_order.reality_amount)}}</div>
            </div>
          </el-card>
          <el-card class="box-card"
                   shadow="never">
            <div slot="header"
                 class="clearfix">
              <span>所购商品</span>
            </div>
            <div class="realNameStyle display">
              <div class="flex">
                <div>
                  <img class="avaterName"
                       :src="consumptionDetails.goods_order.host_img[0]"
                       alt="" />

                </div>

              </div>
              <div class="flex-column-between"
                   style="height: 90px;width: 400px;">
                <!-- <div>{{ consumptionDetails.goods_order.goods_name }}</div> -->
                <div style="color:black;font-weight: 700;"
                     class="font-overflow2 ">{{ consumptionDetails.goods_order.goods_name}}</div>
                <div>{{ consumptionDetails.goods_order.title }}</div>
                <div class="flex-start">
                  <div class="technicianName">价格{{ consumptionDetails.goods_order.total_price}}</div>
                  <div style="margin-left:10px"
                       class="technicianName">数量x{{ consumptionDetails.goods_order?.number}}</div>
                </div>

              </div>
            </div>

          </el-card>
        </div>
        <div class="flex-column-between "
             v-if="consumptionDetails.operate_type==10||consumptionDetails.operate_type==11||consumptionDetails.operate_type==12||consumptionDetails.operate_type==13||consumptionDetails.operate_type==14||consumptionDetails.operate_type==15||consumptionDetails.operate_type==16||consumptionDetails.operate_type==17">
          <el-card class="box-card"
                   shadow="never">
            <div slot="header"
                 class="clearfix">
              <span>套餐信息</span>
            </div>
            <div class="padding30">
              <div class="m-bottom15">订单编号: {{ consumptionDetails.package_order.order_sn }}</div>

              <div class="m-bottom15">下单时间
                {{ consumptionDetails.package_order.create_time}} </div>
              <div class="m-bottom15">套餐名称: {{ consumptionDetails.package_order.name }}</div>
              <div class="m-bottom15">套餐描述: {{consumptionDetails.package_order.desc  }}</div>
              <div class="m-bottom15">原价: ￥{{consumptionDetails.package_order.original_price }}</div>
              <div class="technicianName m-bottom15">折扣优惠价:{{ consumptionDetails.package_order.price}}</div>
              <div class="technicianName">折扣:{{ (consumptionDetails.package_order.discount_ratio)/10}}折</div>

            </div>
          </el-card>
          <el-card class="box-card"
                   shadow="never">
            <div slot="header"
                 class="clearfix">
              <span>所购套餐</span>
            </div>
            <div class="packageCardArr"
                 :style="{ '--bg-image': `url(${consumptionDetails.package_order.style})` }">
              <div class="flex-between "
                   style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20px;">
                <div class="flex">
                  <img class="avatar"
                       :src="consumptionDetails.package_order.logo"
                       alt="">

                  <div class="flex-column-between-start">
                    <div class="font-overflow centerText price font-weight_bold"> {{consumptionDetails.package_order.name}} </div>

                    <div class="font-overflow centerText price font-weight_bold">{{consumptionDetails.package_order.desc}}</div>
                  </div>
                </div>

                <!-- <div class="rechargeBtn flex"
                     @click="cardPurchase(consumptionDetails.package_order)">
                  购卡
                </div> -->

              </div>

              <div class="margin-top_20px">
                <span class="font-overflow centerText  priceText font-weight_bold margin-right_16px">{{'已有'+consumptionDetails.package_order.sales_volume+'人付款'}}</span>
                <span class="font-overflow centerText  priceText font-weight_bold">充值金额：{{consumptionDetails.package_order.sales_amount}}</span>
              </div>

            </div>

          </el-card>
        </div>
        <div class="flex-column-between height83"
             v-if="consumptionDetails.operate_type==1||consumptionDetails.operate_type==2
             ||consumptionDetails.operate_type==3||consumptionDetails.operate_type==4||
             consumptionDetails.operate_type==5||consumptionDetails.operate_type==6||
             consumptionDetails.operate_type==7||consumptionDetails.operate_type==21||
             consumptionDetails.operate_type==22||consumptionDetails.operate_type==23||
             consumptionDetails.operate_type==24||consumptionDetails.operate_type==25||
             consumptionDetails.operate_type==26||consumptionDetails.operate_type==27">
          <el-card class="box-card"
                   shadow="never">
            <div slot="header"
                 class="clearfix">
              <span>消费信息</span>
            </div>
            <div class="padding30">
              <div class="m-bottom15">订单编号: {{ consumptionDetails?.order_sn }}</div>

              <div class="m-bottom15">下单时间:
                {{ consumptionDetails.create_time}} </div>
              <div class="m-bottom15">充值金额: {{ consumptionDetails.amount }}元</div>
              <div class="m-bottom15">赠送金额: {{consumptionDetails.give_amount  }}元</div>

            </div>
            <!-- <div class="padding30">
              <div class="m-bottom15">订单编号: {{ consumptionDetails?.recharge_order?.sn_order }}</div>

              <div class="m-bottom15">下单时间:
                {{ consumptionDetails.recharge_order.create_time}} </div>
              <div class="m-bottom15">充值金额: {{ consumptionDetails.recharge_order.amount }}</div>
              <div class="m-bottom15">赠送金额: {{consumptionDetails.recharge_order.give_amount  }}</div>

            </div> -->
          </el-card>

        </div>
      </div>
    </el-drawer>
    <!-- 图片预览 -->
    <el-image-viewer v-if="viewerVisible"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

import { amountLogInfo } from '@/api/financialManagement/index'

import { editClassify, addClassify } from '@/api/classifyList/index'
export default {
  name: 'pictureEdit',
  components: { ElImageViewer },
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  data () {
    const categoryImage = (rule, value, callback) => {
      console.log(this.form.img);
      if (!this.form.img) {
        callback(new Error('请上传图片'));
      } else {
        callback();
      }
    };
    const DEFAULT_FORM = {
      // 分类名称
      name: '',
      //   分类图片
      img: '',
      // 排序号
      sort: '',


    };
    return {
      storageMode: '',
      consumptionDetails: '',
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],


        sort: [
          {
            required: true,
            message: '请输入排序值',
            trigger: 'blur'
          }
        ],
        // 站点 图片上传
        categoryImages: [
          { required: true, validator: categoryImage, trigger: 'change' }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false
    };
  },
  activated () {
    // operate_type
  },
  computed: {



    cardCoupon () {
      return function (pointsUsed, deductionAmount) {
        console.log(pointsUsed, deductionAmount)
        let pointsUseds = pointsUsed ? pointsUsed : 0
        let deductionAmounts = Number(deductionAmount) ? Number(deductionAmount) : 0
        if (deductionAmounts >= pointsUseds) {
          const cardCoupon = deductionAmounts - pointsUseds
          return cardCoupon
        } else {
          return 0
        }
      }
    },
    serviceStatusType () {
      return function (serviceType) {

        if (serviceType == 1) {
          return {
            text: '余额支付',
            types: 'success'
          };
        } else if (serviceType == 2) {
          return {
            text: '微信在线支付',
            types: 'success'
          };
        } else if (serviceType == 3) {
          return {
            text: '微信线下充值',
            types: 'success'
          };
        } else if (serviceType == 4) {
          return {
            text: '支付宝充值',
            types: 'success'
          };
        } else if (serviceType == 5) {
          return {
            text: '现金充值',
            types: 'success'
          };
        }
        else if (serviceType == 6) {
          return {
            text: 'pos充值',
            types: 'success'
          };
        }
        else if (serviceType == 7) {
          return {
            text: '微信线上扫码充值',
            types: 'success'
          };
        } else if (serviceType == 8) {
          return {
            text: '支付宝在线扫码充值',
            types: 'success'
          };
        }
      };
    },
    informationType () {
      return function (informationType) {

        if (informationType == 3) {
          return {
            text: '待发货',
            types: 'warning'
          };
        } else if (informationType == 4) {
          return {
            text: '待收货',
            types: 'info'
          };
        } else if (informationType == 5) {
          return {
            text: '退款中',
            types: 'danger'
          };
        } else if (informationType == 6) {
          return {
            text: '已完成',
            types: 'success'
          };
        } else if (informationType == 1) {
          return {
            text: '待付款',
            types: 'success'
          };
        } else if (informationType == 2) {
          return {
            text: '已支付',
            types: 'success'
          };
        } else if (informationType == 7) {
          return {
            text: '已退款',
            types: 'danger'
          };
        } else if (informationType == 8) {
          return {
            text: '已取消',
            types: 'danger'
          };
        }
      };
    }
  },
  methods: {
    // 获取存储配置
    // async storageConfig () {
    //   const res = await storageConfigDetail();

    //   // console.log(res.storageMode);

    //   this.storageMode = res?.storageMode;
    // },
    // 关闭查看器
    closeViewer () {
      this.viewerVisible = false;
    },
    // 下载图片
    handleDownload (file) {
      window.open(file.url);
    },
    // 删除图片
    handleRemove () {
      this.fileList = [];
      this.imageUrl = '';
    },
    //  图片上传个数超过限制
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolen', false);
    },
    async handleFileChange (file, fileList) {
      console.log(this.storageMode);
      if (this.storageMode == 2) {
        this.aliFn(file, fileList);
      } else if (this.storageMode == 3) {
        this.qnyFn(file, fileList);
      }
    },
    // 阿里云
    // async aliFn (file, fileList) {
    //   this.loading = true;
    //   const res = await userOssSignature();
    //   let files = file.raw;
    //   let filename = file.name;
    //   let markIndex = filename.lastIndexOf('.');
    //   let suffix = filename.substring(markIndex);
    //   let date = new Date().getTime();
    //   // 构建请求参数
    //   let param = new FormData();
    //   param.append('key', date + suffix);
    //   param.append('policy', res.policy);
    //   param.append('OSSAccessKeyId', res.accessId);
    //   param.append('success_action_status', '200');
    //   // param.append("callback",  this.data.callback)     //回调（not)
    //   param.append('signature', res.signature);
    //   param.append('file', files, files.name);
    //   param.append('success_action_status', '200');
    //   let config = {
    //     headers: {
    //       'Access-Control-Allow-Origin': '*',
    //       'x-oss-callback-Authorization': getToken()
    //     }
    //   };
    //   console.log('suffix', suffix);

    //   let result = await axios.post(res.host, param, config);
    //   let url = res.host + '/' + date + suffix;
    //   console.log(url);
    //   this.form.categoryImages = url;
    //   this.imageUrl = url;
    //   this.loading = false;
    // },
    // async qnyFn (file, fileList) {
    //   this.loading = true;
    //   console.log(file, fileList);

    //   let files = file.raw;
    //   console.log(files);
    //   //   // 构建请求参数
    //   let param = new FormData();

    //   param.append('file', files, files.name);
    //   param.append('getsize', files.size);
    //   param.append('getContentType', files.type);
    //   param.append('getoriginalfilename', files.name);
    //   param.append('getName', files.name);

    //   const res = await qnyOssSignature(param);
    //   console.log(res.url);
    //   this.form.categoryImages = res.url;
    //   this.imageUrl = res.url;
    //   console.log('上传图片成功=======', res);
    //   this.loading = false;
    // },
    // 点击按钮预览图片
    handlePictureCardPreview () {
      const imgStr = this.imageUrl;
      console.log(imgStr);
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.viewerVisible = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },
    /* 保存编辑 */
    save () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.form.img = this.imageUrl;
        const data = {
          ...this.form
        };
        console.log(data);
        this.loading = true;

        const saveOrUpdate = this.isUpdate
          ? editClassify
          : addClassify;
        saveOrUpdate(data)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg.msg);
            if (!this.isUpdate) {
              this.$router.go(0);
            }
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.msg);
          });
      });
    }
    /* 更新visible */
  },


  watch: {
    drawerEditBoolen (visible) {
      this.$nextTick(async () => {
        if (visible) {

          if (this.data) {
            console.log(this.data.id);
            const res = await amountLogInfo({
              id: this.data.id
            })
            console.log(res)

            if (res.operate_type == 10 || res.operate_type == 11 || res.operate_type == 12 || res.operate_type == 13
              || res.operate_type == 14 || this.operate_type == 15 || res.operate_type == 16 || res.operate_type == 17) {
              this.consumptionDetails = res
            } else if (res.operate_type == 1 || res.operate_type == 2
              || res.operate_type == 3 || res.operate_type == 4 ||
              res.operate_type == 5 || res.operate_type == 6 ||
              res.operate_type == 7 || res.operate_type == 21 ||
              res.operate_type == 22 || res.operate_type == 23 ||
              res.operate_type == 24 || res.operate_type == 25 ||
              res.operate_type == 26 || res.operate_type == 27) {

              this.consumptionDetails = res
            } else {
              res.goods_order.host_img = res.goods_order.host_img.split(',').map((item) => item.trim());
              this.consumptionDetails = res
            }


            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            // this.$refs['form'].resetFields();
            console.log(this.form);
          });
          this.fileList = [];

        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.packageCardArr {
  position: relative;
  //   margin-top: 32px;
  padding: 12px 20px;
  //   height: 108px;
  border-radius: 17px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: (var(--bg-image));
  // background-image: url('../../../static/套餐卡背景/矩形 1591.png');

  .avatar {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    border-radius: 50%;
  }

  .rechargeBtn {
    width: 61.25px;
    height: 26px;
    border-radius: 20px;
    z-index: 999;
    background: rgb(255, 255, 255);
  }

  .rechargeBtn-noListing {
    width: 110px;
    height: 52px;
    border-radius: 10px;
  }

  .centerText {
    width: 258px;
  }

  .price {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

  .priceText {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
  }
}
.realNameStyle {
  position: relative;
  .avaterName {
    width: 90px;
    height: 90px;
    margin-right: 10px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .addClocks {
    position: absolute;
    top: 0;
    width: 30px;
    line-height: 24px;
    text-align: center;
    height: 24px;
    background-color: #1890ff;
  }
  .technicianName {
    color: #1890ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
  }
}
.orderPageDescribe {
  // padding-right: 90px;

  .img {
    width: 100px;
    height: 100px;
  }
}
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 43vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
